<template>
  <div
    class="w-[350px] border border-gray-200 bg-white p-3 shadow-md rounded-lg"
    @click="openDrawer"
  >
    <Handle type="target" :position="Position.Left" />
    <div class="flex flex-col gap-y-1">
      <common-title-module />
      <CommonDisplayModule
        title="输出"
        :valueList="data?.outputjsonlist"
      />
      <div class="flex items-center">
        <div class="node-sub-text">数据表</div>
        <div class="ml-2 node-text">{{ selectSQL.name || '未配置数据表' }}</div>
      </div>
      <div class="flex items-center">
        <div class="mr-1 node-sub-text">删除条件</div>
        <div
          class="w-5/6 p-1 border border-gray-300 border-solid rounded-md border-1"
          v-if="data.selectlist[0].publicjson.length"
        >
          <div v-for="(condition, cIndex) in data.selectlist[0].publicjson" :key="cIndex">
            <div class="flex items-center justify-between">
              <div
                class="flex-1 p-1 mr-2 text-sm font-semibold rounded-md bg-slate-100"
              >
                {{ condition.varname }}
              </div>
              <div
                :title="OPERATOR_VALUES[condition.vartype][condition.condition]?.name"
              >
                {{ OPERATOR_VALUES[condition.vartype][condition.condition]?.mark }}
              </div>
              <div
                class="flex-1 p-1 ml-2 text-sm font-semibold rounded-md bg-slate-100"
              >
                {{ condition.varparam }}
              </div>
            </div>
            <div class="logic" v-if="cIndex != data.selectlist[0].publicjson.length - 1">
              {{ LOGIC_VALUES[data.selectlist[0].andor] }}
            </div>
          </div>
        </div>
        <p class="ml-2 node-text" v-else>未配置删除条件</p>
      </div>
    </div>
    <Handle type="source" :position="Position.Right" />
  </div>
  <DatabaseDeleteDrawerModule
    ref="drawerRef"
    :title="node?.node?.label"
    :form="data"
    @add="handleClickAddBtn"
    @remove="handleClickDeleteBtn"
    @cancel="onCancel"
    :selectSQL="selectSQL"
  />
</template>
<script setup>
import { ref } from 'vue';
import { Handle, Position, useNode } from '@vue-flow/core';
import { OPERATOR_VALUES, LOGIC_VALUES } from '../../lib/constant';
import { editNode } from '@/api/modules/flow';
import { listTableField } from '@/api/modules/flow';

import CommonTitleModule from '../modules/common-title-module.vue';
import CommonDisplayModule from '../modules/common-display-module.vue';
import DatabaseDeleteDrawerModule from '../modules/database-delete-drawer-module.vue';

defineProps();
const node = useNode();

const data = ref({
  databeseid: node.node.data?.databeseid || '',
  selectlist: node.node.data?.selectlist || [
    {
      andor: 'and',
      publicjson: []
    }
  ],
  excepjsondata: node.node.data?.excepjsondata || {
    timeout: 60,
    retrycount: '不重试',
    excepmethod: '中断流程',
  },
  outputjsonlist: node.node.data?.outputjsonlist || [
    {
      varname: 'outputList',
      vartype: 'Array<Object>',
      vardesc: '',
      outputlist: [],
    },
    {
      varname: 'rowNum',
      vartype: 'Integer',
      vardesc: '',
    }
  ],
});

const selectSQL = ref({
  name: '',
  sqlList: []
})
const getTableField = async() => {
  if (!node.node.data?.databeseid) return;
  try {
    const { data } = await listTableField({data: {dbtableid: node.node.data?.databeseid}})
    selectSQL.value.name = data[0].tablename;
    selectSQL.value.sqlList = data;
  }catch(err) {
    selectSQL.value.name = '';
    selectSQL.value.sqlList = [];
  }
}
getTableField()

const drawerRef = ref(null);
const openDrawer = () => {
  drawerRef.value?.init();
};

function handleClickAddBtn(listKey) {
  if (listKey == 'outputjsonlist') {
    data.value.outputjsonlist[0].outputlist.push({
      varname: '',
      vartype: 'String',
      vardesc: '',
    })
  } else {
    data.value[listKey].push({
      varname: '',
      vartype: 'String',
      varparam: '',
    });
  }
  node.node.data = {
    ...node.node.data,
  };
}

function handleClickDeleteBtn(listKey, index) {
  if (listKey == 'outputjsonlist') {
    data.value.outputjsonlist[0].outputlist.splice(index, 1);
  } else {
    data.value[listKey].splice(index, 1);
  }
  node.node.data = {
    ...node.node.data,
  };
}

const onCancel = async() => {
  await editNode({data: { id: node.id, ...data.value}})
}
</script>
